<template>
    <div>
        <el-dialog title="知识点审核" :visible.sync="auditVisible" width="680px" class="auditDialog" :lock-scroll="false" :before-close="cancel">
            <div class="auditContent">
                <p class="title mb20">{{auditType=='correct'&&operateType==2?'原纠错建议':'原问题状态'}}</p>
                <div class="auditItem">
                    <span class="lable">所属分类</span><span class="content">{{auditInfo.className}}</span>
                </div>
                <div class="auditItem">
                    <span class="lable">标准问题</span><span class="content">{{auditInfo.question}}</span>
                </div>
                <div class="auditItem">
                    <span class="lable">标准答案</span><span class="content">{{auditInfo.answer}}</span>
                </div>
                <div class="auditItem" v-if="auditType == 'correct'">
                    <span class="lable">纠错建议</span><span class="content">xxxx</span>
                </div>
                <div class="auditItem">
                    <span class="lable">创建人</span><span class="content">{{auditInfo.addUserName}}</span>
                </div>
                <div class="auditItem">
                    <span class="lable">创建时间</span><span class="content">{{auditInfo.addTime}}</span>
                </div>
                <div class="auditItem">
                    <span class="lable">审核状态</span><span class="content">{{formatStatus(auditInfo.status)}}</span>
                </div>
                <div class="auditItem" v-show="operateType == 3">
                    <span class="lable">驳回原因</span><span class="content">{{auditInfo.remark}}</span>
                </div>
            </div>
            <div v-show="operateType != 3">
                <el-divider></el-divider>
            </div>
            <div class="auditContent flexbetween mb20" v-show="operateType == 2">
                <p class="title">问题审核</p>
                <el-button type="primary" size="small" plain @click="addAnswer">添加答案</el-button>
            </div>
            <div v-show="operateType != 3">
                <knowledge-question ref="knowledgeQuestion" @showDialogueList="showDialogueList" type="audit" :disabled="operateType == 1">
                </knowledge-question>
            </div>
            <div v-show="operateType == 0">
                <div class="auditContent mb20">
                    <p class="title">问题审核</p>
                </div>
                <div class="auditContent">
                    <div class="auditItem"><span class="lable">所属分类</span><span class="content">xxxxxxx</span></div>
                    <div class="auditItem"><span class="lable">标准问题</span><span class="content">xxxxxxx</span></div>
                </div>
                <div class="auditContent answerItem mb20">
                    <div class="answerTitle flexbetween">
                        <span class="title">答案1</span>
                        <!-- <el-tooltip effect="light" :content="item.extend ? '收起':'展开'" placement="top" :enterable="false">
                            <span :class="['answerIcon'+index,'iconfont','icon-zhankai']" @click="slide(index)"></span>
                        </el-tooltip> -->
                    </div>
                    <div class="answerContent">
                        <div class="auditItem"><span class="lable">答案类型</span><span class="content">xxxxxxx</span></div>
                        <div class="auditItem"><span class="lable">答案内容</span><span class="content">xxxxxxx</span></div>
                        <div class="auditItem"><span class="lable">生效渠道</span><span class="content">xxxxxxx</span></div>
                        <div class="auditItem">
                            <span class="lable">生效状态</span>
                            <span class="content">
                                <el-switch :value="1" :active-value="1" :inactive-value="0"></el-switch>
                            </span>
                        </div>
                        <div class="auditItem"><span class="lable">生效时间</span><span class="content">xxxxxxx</span></div>
                    </div>
                </div>
                <div class="auditContent">
                    <div class="auditItem"><span class="lable">标签</span><span class="content">xxxxxxx</span></div>
                    <div class="auditItem">
                        <span class="lable">答案评价</span>
                        <span class="content">
                            <el-switch :value="1" :active-value="1" :inactive-value="0"></el-switch>
                        </span>
                    </div>
                    <div class="auditItem"><span class="lable">转人工</span><span class="content">xxxxxxx</span></div>
                    <div class="auditItem">
                        <span class="lable">推荐问题</span>
                        <span class="content">
                            <el-switch :value="1" :active-value="1" :inactive-value="0"></el-switch>
                        </span>
                    </div>
                </div>
            </div>
            <span slot="footer" class="dialog-footer">
                <el-button type="primary" size="small" class="fl" style="margin-left: 0" @click="prev">
                    <i class="el-icon-arrow-left"></i>上一个
                </el-button>
                <el-button type="primary" size="small" class="fl" @click="next">
                    下一个<i class="el-icon-arrow-right"></i>
                </el-button>
                <el-button type="primary" size="small" class="fr" v-if="operateType == 2" @click="passQuestion">通过</el-button>
                <el-button type="danger" size="small" plain class="fr" v-if="operateType == 2" @click="turnDownVisible = true">驳回
                </el-button>
            </span>
        </el-dialog>

        <el-dialog title="驳回" :visible="turnDownVisible" width="680px" @close="turnDownHide">
            <el-form ref="turnDownForm" :model="turnDownForm" :rules="turnDownRules" label-width="90px">
                <el-form-item label="驳回原因" prop="remark">
                    <el-input v-model="turnDownForm.remark" type="textarea" :rows="8"></el-input>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button size="small" type="text" @click="turnDownHide">取消</el-button>
                <el-button type="primary" size="small" @click="turnDownSubmit">确定</el-button>
            </span>
        </el-dialog>

        <!-- 选择会话 -->
        <select-dialogue :selectDialogueVisible.sync="selectDialogueVisible" @chooseDialogue="chooseDialogue" ref="similarQuestionDialog">
        </select-dialogue>
    </div>
</template>

<script>
import { editQuestionImport } from "@/api/knowledgeTransfer";
import { addQuestion, findQuesById } from "@/api/knowledge";
import knowledgeQuestion from "@/components/knowledgeQuestion/index.vue";
import selectDialogue from "@/views/robotKnowledge/knowledge/faqManage/selectDialogue.vue";
import { mapGetters } from "vuex";
export default {
    name: "auditDialog",
    props: {
        auditVisible: Boolean,
        auditType: String, //新增：add  纠错: correct
    },
    data() {
        return {
            currentIndex: 0,
            selectDialogueVisible: false,
            auditInfo: {},
            operateType: 1, // 1:已通过  2:待审核  3:已驳回
            turnDownVisible: false, //驳回原因弹窗
            turnDownRules: {
                remark: [{ required: true, message: '请输入驳回原因', trigger: 'change' }],
            },
            turnDownForm: {
                remark: ""
            }
        }
    },
    methods: {
        setAuditInfo(data) {
            this.currentIndex = this.questionList.findIndex(item => item.id == data.id);
            this.operateType = data.status;
            this.auditInfo = data;
            if (this.operateType == 2) {
                let knowledgeList = this.flatTree(this.knowledgeList);
                let index = knowledgeList.findIndex(item => item.label == data.className);
                let classId = index > -1 ? knowledgeList[index].id : null;
                var param = {
                    classId: classId,
                    question: data.question,
                    answerList: [{ mode: 1, answer: data.answer, answerTimeLiness: 1, answerTimeType: 1, answerStartTime: new Date().format("yyyy-MM-dd HH:mm:ss"), answerEndTime: "2099-12-31 23:59:59" }]
                }
                this.$nextTick(() => {
                    this.$refs.knowledgeQuestion.setQueData(param);
                });

            } else if (this.operateType == 1) {
                findQuesById({ id: data.questionId }).then(resp => {
                    if (resp.status == 0) {
                        this.$refs.knowledgeQuestion.setQueData(resp.data);
                    }
                });
            }
        },
        addAnswer() {
            this.$refs.knowledgeQuestion.addAnswer();
        },
        cancel() {
            this.$refs.knowledgeQuestion.clearFromData();
            this.$emit("update:auditVisible", false);
            document.querySelector(".auditDialog .el-dialog__body").scrollTop = 0;
        },
        formatStatus(status) {
            return status == 1 ? "已通过" : status == 2 ? "待审核" : "已驳回";
        },
        showDialogueList() {
            this.selectDialogueVisible = true
        },
        chooseDialogue(data) {
            this.$refs.knowledgeQuestion.setDialogue(data);
        },
        //通过
        passQuestion() {
            var data = this.$refs.knowledgeQuestion.getFromData();
            if (data) {
                data.fromSource = 2;
                addQuestion(data).then(resp => {
                    if (resp.status == 0) {
                        var param = {
                            id: this.auditInfo.id,
                            status: 1,
                            questionId: resp.data.questionId
                        }
                        editQuestionImport(param).then(resp => {
                            if (resp.status == 0) {
                                this.$antMessage.success("通过成功");
                                this.cancel();
                                this.$parent.getQuestionList();
                            } else {
                                this.$antMessage.warning(resp.message);
                            }
                        });
                    } else {
                        this.$antMessage.warning(resp.message);
                    }
                });
            }
        },
        //驳回提交
        turnDownSubmit() {
            this.$refs.turnDownForm.validate(valid => {
                if (valid) {
                    var param = {
                        id: this.auditInfo.id,
                        status: 3,
                        remark: this.turnDownForm.remark
                    }
                    editQuestionImport(param).then(resp => {
                        if (resp.status == 0) {
                            this.$antMessage.success("驳回成功");
                            this.turnDownHide();
                            this.cancel();
                            this.$parent.getQuestionList();
                        } else {
                            this.$antMessage.warning(resp.message);
                        }
                    });
                }
            });
        },
        turnDownHide() {
            this.$refs.turnDownForm.resetFields();
            this.turnDownVisible = false;
        },
        flatTree(data, childName = 'children') {
            return data.reduce((prev, curt) => {
                const childs = curt[childName]?.length ? this.flatTree(curt[childName]) : []
                return [...prev, curt, ...childs]
            }, [])
        },
        //上一个
        prev() {
            if (this.currentIndex > 0) {
                this.currentIndex -= 1;
                this.setAuditInfo(this.questionList[this.currentIndex]);
                return;
            }
            if (this.$parent.pageNo > 1) {
                this.$parent.pageNo -= 1;
                this.$parent.getQuestionList((list) => {
                    this.currentIndex = list.length - 1;
                    this.setAuditInfo(list[this.currentIndex]);
                });
            } else if (this.$parent.pageNo == 1) {
                this.$antMessage.warning("已经是第一个了");
            }
        },
        //下一个
        next() {
            var maxPageNo = Math.ceil(this.$parent.total / this.$parent.pageSize);
            if (this.currentIndex < this.questionList.length - 1) {
                this.currentIndex += 1;
                this.setAuditInfo(this.questionList[this.currentIndex]);
                return;
            }
            if (this.$parent.pageNo < maxPageNo) {
                this.$parent.pageNo += 1;
                this.$parent.getQuestionList((list) => {
                    this.currentIndex = 0;
                    this.setAuditInfo(list[this.currentIndex]);
                });
            } else if (this.$parent.pageNo == maxPageNo) {
                this.$antMessage.warning("已经是最后一个了");
            }
        }
    },
    computed: {
        ...mapGetters(["knowledgeList"]),
        questionList() {
            return this.$parent.questionList || [];
        }
    },
    components: {
        knowledgeQuestion,
        selectDialogue
    }
}
</script>

<style lang="scss">
.auditDialog {
    .el-divider--horizontal {
        margin: 20px 0;
    }
    .el-dialog__body {
        padding-top: 30px;
    }
    .el-dialog__footer {
        padding-top: 40px;
        .el-button {
            &:nth-child(1),
            &:nth-child(2) {
                padding: 10px 15px;
            }
            i {
                line-height: inherit;
            }
            .el-icon-arrow-left {
                margin-right: 5px;
            }
            .el-icon-arrow-right {
                margin-left: 5px;
            }
        }
    }
    .auditContent {
        padding-left: 20px;
        .title {
            font-size: 14px;
            font-weight: bold;
            color: #363c43;
        }
        .auditItem {
            margin-bottom: 20px;
            display: flex;
            .lable {
                flex-shrink: 0;
                display: inline-block;
                width: 100px;
                text-align: right;
                margin-right: 20px;
                color: #363c43;
            }
            .content {
                color: #676e75;
            }
        }
    }
    .answerItem {
        background: #f5f7fa;
        border-radius: 6px;
        .answerTitle {
            height: 50px;
        }
        .answerContent {
            padding: 20px 0;
            .auditItem:last-child {
                margin-bottom: 0;
            }
            .el-switch {
                position: relative;
                top: -2px;
            }
        }
    }
}
</style>